import React, { Component } from 'react';
import TheTable from "@/components/TheTable"
import TheButton from '../../components/TheButton';
import ThePagination from '../../components/ThePagination';
import { Button, Form, Input, Modal, Select } from "antd";
import { apiStoreCameraPage, apiStoreCameraDel, apiStoreCameraView, apiStoreCameraList, apiStoreCameraEdit, apiStoreCameraAdd } from '@/request/camera'
import VideoPlayer from "../../components/VideoPlayer"

const { Option } = Select
export default class CameraConfig extends Component {
    constructor() {
        super()
        this.state = {
            cameraList: [],
            columns: [
                {
                    title: "摄像头名称",
                    dataIndex: "cameraName",
                    key: "cameraName",
                },
                {
                    title: "摄像头地址",
                    dataIndex: "cameraAddress",
                    key: "cameraAddress",
                },
                {
                    title: "操作",
                    render: (text) => {
                        return (
                            <div>
                                <TheButton hasPermi={['camera:config:view']} onClick={() => this.preview(text.cameraId, text.cameraAddress)}>预览</TheButton>
                                <TheButton hasPermi={['camera:config:edit']} onClick={() => this.edit(text.cameraId)}>编辑</TheButton>
                                <TheButton hasPermi={['camera:config:delete']} onClick={() => this.del(text.cameraId)}>删除</TheButton>
                            </div>
                        )
                    }
                }
            ],
            dataSource: [],
            isModalVisible: false,
            cameraId: '',
            modalTitle: '新增',
            pageNo: 1,
            pageSize: 10,
            total: 0,
            loading: false,
            isvideoModalVisible: false,
            cameraAddress: ""
        };
    }
    formRef = React.createRef()

    componentDidMount() {
        this.getData()
        this.getCameraList()
    }

    async getCameraList() {
        let res = await apiStoreCameraList()
        if (res.code === 0) {
            this.setState({
                cameraList: res.data
            })
        }
    }
    async getData() {
        const { cameraId } = this.state
        let res = await apiStoreCameraPage({ pageNo: this.state.pageNo, pageSize: 10, cameraId })
        if (res.code === 0) {
            this.setState({
                dataSource: res.data,
                total: res.totalCount
            })
        }
    }
    add() {
        this.setState({
            isModalVisible: true, cameraId: '',
            modalTitle: '新增'
        }, () => this.resetForm())
    }
    edit(cameraId) {
        this.setState({
            isModalVisible: true,
            cameraId: cameraId,
            modalTitle: '编辑'

        }, async () => {
            let res = await apiStoreCameraView({ cameraId })
            if (res.code === 0) {
                this.formRef.current.setFieldsValue({
                    cameraName: res.data.cameraName,
                    cameraAddress: res.data.cameraAddress,
                    deviceSerial: res.data.deviceSerial,
                    channelNo: res.data.channelNo
                })
            }
        })
    }
    async del(cameraId) {

        Modal.confirm({
            title: '提示',
            content: '是否确认删除？',
            onOk: async () => {
                let res = await apiStoreCameraDel({ cameraId })
                if (res.code === 0) {
                    this.setState({
                        isModalVisible: false,
                        cameraId: '',
                        pageNo: 1
                    }, () => {
                        this.getData()
                        this.getCameraList()
                    })
                }
            },
            onCancel() {
            },
        });
    }

    async preview(cameraId, cameraAddress) {
        let params = {
            cameraId: cameraId
        }
        this.setState({
            isvideoModalVisible: true,

        }, () => {
            this.setState({
                cameraId: cameraId,
                cameraAddress: cameraAddress
            })
        })
    }

    videoOk = async () => {
        this.setState({
            isvideoModalVisible: false,
        })
        // let cameraId = this.state.cameraId
        // let params = {
        //     cameraId:cameraId
        // }
    }

    videoCancel = async () => {
        this.setState({
            isvideoModalVisible: false
        })
        // let cameraId = this.state.cameraId
        // let params = {
        //     cameraId:cameraId
        // }
    }

    handleOk = () => {
        this.formRef.current.validateFields().then(async values => {
            this.setState({
                loading: true
            })
            let res;
            if (this.state.cameraId) {
                res = await apiStoreCameraEdit({ ...values, cameraId: this.state.cameraId })

            } else {
                res = await apiStoreCameraAdd({ ...values })
            }
            if (res.code === 0) {
                React.$message({ type: 'info', content: `${this.state.modalTitle}成功` })
                this.setState({
                    isModalVisible: false,
                    pageNo: 1, cameraId: '',
                    loading: false
                }, () => {
                    this.getData()
                    this.getCameraList()
                })
            } else {
                this.setState({
                    loading: false
                })
                return React.$message({ type: 'warning', content: res.codeMessage })
            }

        })

    }
    handleCancel = () => {
        this.setState({
            isModalVisible: false, cameraId: ''
        })
    }
    resetForm() {
        setTimeout(()=>{
            this.formRef.current.resetFields();
        },1000)
    }
    pageChange = (e) => {
        this.setState({
            pageNo: e,
            cameraId: ""
        }, () => {
            this.getData()
        })

    }
    onFinish = (values) => {
        this.setState({
            cameraId: values.cameraId ? values.cameraId : ''
        }, () => {
            this.getData()
        })

    }
    render() {
        let { columns, dataSource, isModalVisible, pageNo, pageSize, total, modalTitle, cameraList, loading, isvideoModalVisible, cameraAddress } = this.state
        return (
            <div className='p-layout-box '>
                <div style={{ marginBottom: 20 }}>
                    <Form
                        layout={'inline'}
                        onFinish={this.onFinish}
                    >
                        <Form.Item
                            name="cameraId"
                        >
                            <Select allowClear placeholder="摄像头名称"
                                style={{ width: 200 }}
                            >
                                {
                                    cameraList.length > 0 && cameraList.map(item => {
                                        return (
                                            <Option key={item.cameraId} value={item.cameraId}>{item.cameraName}</Option>
                                        )
                                    })
                                }
                            </Select>
                        </Form.Item>

                        <Form.Item
                        >
                            <Button type='primary' htmlType='submit'>搜索</Button>
                            <TheButton type="default" size="middle" hasPermi={['camera:config:add']} onClick={() => this.add()} >新增</TheButton>
                        </Form.Item>

                    </Form>
                </div>
                <TheTable columns={columns} dataSource={dataSource} />
                <ThePagination pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                ></ThePagination>
                <Modal title={modalTitle} visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} confirmLoading={loading}>
                    <Form
                        ref={this.formRef}
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="摄像头名称"
                            name="cameraName"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入摄像头名称！',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="设备SN码"
                            name="deviceSerial"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入设备SN码！',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item
                            label="通道号"
                            name="channelNo"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入通道号！',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                    </Form>
                </Modal>
                {isvideoModalVisible ? <Modal visible={isvideoModalVisible} onOk={this.videoOk}
                    onCancel={this.videoCancel}
                >
                    <VideoPlayer src={cameraAddress} />
                </Modal> : null}
            </div>
        );
    }
}
